<script setup>
import {ref, onMounted, reactive} from 'vue'
import {ImageSrcUrlPage, deleteImageSrcUrl } from '@/api/ImageSrcUrl.js'
import { ElMessage, ElMessageBox } from 'element-plus'

const imageList = ref([])
const loading = ref(false)
const total = ref(0)
const currentPage = ref(1)
const pageSize = ref(10)

const formData = reactive({
  alt: '',
  href: '',
  page: '',
  src: '',
})

const columns = [
  {
    title: 'ID',
    dataIndex: 'id',
    key: 'id'
  },
  {
    title: '图片描述',
    dataIndex: 'alt',
    key: 'alt',
  },
  {
    title: '图片链接',
    dataIndex: 'href',
    key: 'href',
  },
  {
    title: '页面标识',
    dataIndex: 'page',
    key: 'page',
  }
]

// 添加排序处理函数
const handleSortChange = ({ column, prop, order }) => {
  const sortMap = {
    ascending: 'asc',
    descending: 'desc'
  }
  formData.orderBy = prop
  formData.order = sortMap[order] || 'desc'
  fetchImages()
}

const fetchImages = async () => {
  loading.value = true
  try {
    const page = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      params: formData,
      orderBy: formData.orderBy,
      order: formData.order
    }
    const response = await ImageSrcUrlPage (page)
    imageList.value = response.list
    total.value = response.total
  } catch (error) {
    console.error('Error fetching images:', error)
  } finally {
    loading.value = false
  }
}

const handleDelete = async (id) => {
  const ids = [id]
  const response = await deleteImageSrcUrl(ids)
  if (response.code === 200) {
    ElMessage.success('删除成功')
    await fetchImages()
  } else {
    ElMessage.error('删除失败')
  }
}

const handleSizeChange = (val) => {
  pageSize.value = val
  fetchImages()
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  fetchImages()
}

onMounted(() => {
  fetchImages()
})

// 添加多选状态变量
const multipleSelection = ref([])

// 添加表格选择变化处理
const handleSelectionChange = (val) => {
  multipleSelection.value = val
}

// 添加批量删除功能
const batchDelete = async () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请选择要删除的项')
    return
  }
  
  try {
    loading.value = true

    const response = await deleteImageSrcUrl(multipleSelection.value.map(item => item.id))
    if (response.code === 200) {
      ElMessage.success('删除成功')
      await fetchImages()
    } else {
      ElMessage.error('删除失败')
    }
    await fetchImages()
  } catch (error) {
    console.error('删除失败:', error)
    ElMessage.error('删除失败')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="image-crawler-container">
    <el-card class="form-card" shadow="hover">
      <el-form ref="form" :inline="true" :model="formData" label-width="90px">
        <el-form-item label="图片描述">
          <el-input v-model="formData.alt" placeholder="请输入图片描述"></el-input>
        </el-form-item>
        <el-form-item label="图片链接">
          <el-input v-model="formData.href" placeholder="请输入图片链接"></el-input>
        </el-form-item>
        <el-form-item label="页面标识">
          <el-input v-model="formData.page" placeholder="请输入页面标识"></el-input>
        </el-form-item>
        <el-form-item label="排序">
          <el-select v-model="formData.orderBy" clearable placeholder="请选择排序字段" style="width: 120px;">
            <el-option
                v-for="item in columns"
                :key="item.dataIndex"
                :label="item.title"
                :value="item.key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="排序方式">
          <el-radio-group v-model="formData.order">
            <el-radio label="asc">升序</el-radio>
            <el-radio label="desc">降序</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="图片地址">
          <el-button @click = "fetchImages" > 查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    
    <h2 class="section-title">图片URL管理</h2>
    
    <div class="table-actions">
      <el-button 
        type="danger" 
        :disabled="multipleSelection.length === 0"
        @click="batchDelete"
      >
        批量删除 ({{ multipleSelection.length }})
      </el-button>
    </div>
    
    <el-table 
      :data="imageList" 
      v-loading="loading" 
      border 
      style="width: 100%"
      class="data-table"
      stripe
      @selection-change="handleSelectionChange"
      @sort-change="handleSortChange"
    >
      <el-table-column type="selection" width="50" />
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="alt" label="图片描述" />
      <el-table-column prop="href" label="图片链接" />
      <el-table-column prop="page" label="页面标识" />
      <el-table-column prop="src" label="源地址" >
        <template #default="scope">
          <el-image :src="scope.row.src" style="width: 158px; height: 237px" fit="cover" />
        </template>
      </el-table-column>
      <el-table-column prop="timestamp" label="时间戳" width="180">
        <template #default="scope">
          {{ new Date(scope.row.timestamp).toLocaleString() }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-container">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped>
.image-crawler-container {
  padding: 24px;
  width: 100%;
  margin: 0 auto;
}

.pagination-container {
  margin-top: 24px;
  display: flex;
  justify-content: flex-end;
}

.form-card {
  margin-bottom: 24px;
  transition: all 0.3s ease;
}

.el-form-item {
  margin-right: 24px;
}

.section-title {
  color: #333;
  font-size: 20px;
  margin: 24px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.data-table {
  margin-top: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.el-image {
  transition: transform 0.3s ease;
}

.el-image:hover {
  transform: scale(1.05);
}

.table-actions {
  margin-bottom: 16px;
  display: flex;
  justify-content: flex-end;
}
</style>